<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <script type="text/javascript">
      document.documentElement.style.fontSize =
        (document.documentElement.clientWidth / 750) * 100 + "px";
    </script>
    <title>深圳</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="css/p1.css" />
    <link rel="stylesheet" type="text/css" href="css/p2.css" />
    <link rel="stylesheet" type="text/css" href="css/p3.css" />
    <link rel="stylesheet" type="text/css" href="css/p4.css" />
    <link rel="stylesheet" type="text/css" href="css/p5.css" />
    <link rel="stylesheet" type="text/css" href="css/p6.css" />
    <link rel="stylesheet" type="text/css" href="css/p7.css" />
    <link rel="stylesheet" type="text/css" href="css/effect.css" />
    <link rel="stylesheet" type="text/css" href="css/all.css" />
  </head>

  <body class="fadeIn">
    <section id="else">
      <audio autoplay="autoplay" id="bgm">
        <source src="music/背景音乐.mp3" type="audio/mp3" />
      </audio>
      <!-- music -->
      <div id="music">
        <img src="img/else/open.png" alt="music" />
      </div>

      <!-- 箭头 -->
      <div id="narrow">
        <img src="img/else/narrw.png" alt="" class="narrow" />
      </div>
    </section>

    <!--第一张页面-->
    <div class="all1 page fadeIn">
      <!--id=" "-->
      <img src="img/p1/1.png" id="bg" />
      <div id="test">
        <p class="fadeIn">一片树林里分出两条路，</p>
        <p class="fadeIn">而我选择了人迹更少的那一条，</p>
        <p class="fadeIn">从此决定了我一生的道路······</p>
      </div>
    </div>
    <!--第二张页面-->
    <div class="all2 page fadeIn" style="display: none;">
      <div id="top">
        <p>脚踏实地 放歌鹏城</p>
        <p></p>
        <p>城市和您，让我们相互改变</p>
      </div>
      <img src="img/p2/3.png" id="yun" />
      <div id="photo">
        <img src="img/p2/59e59b9392b5797f3131d110.png" class="fadeInfite" />
        <img src="img/p2/5c78e43b52fae13b4f5c86de.png" class="fadeInfite" />
        <img src="img/p2/59e59b9392b5790320217a9f.png" class="fadeInfite" />
      </div>
      <p id="sz">深圳市委组织部&nbsp;&nbsp;宣</p>
    </div>
    <!--第三张页面-->
    <div class="all3 page fadeIn" style="display: none;">
      <div id="lan">
        <p class="la1">人生芳华，随风似梦。</p>
        <p class="la2">昨天，今天，明天，</p>
        <p class="la3">宁静之后重归宁静。</p>
        <p class="la4">于文献、图表、数据和仪器的环绕中，</p>
        <p class="la5">您是否记得，</p>
        <p class="la6">那弥漫在市井的烟火气息？</p>
      </div>
      <img src="img/p3/7.png" id="fly" />
      <img src="img/p3/5.png" id="p3" />
      <img
        src="img/p3/top.png"
        class="sildeOut-top clound-positon coloud-top"
      />
      <img
        src="img/p3/small.png"
        class="sildeOut-small clound-positon coloud-small"
      />
    </div>
    <!--第四张页面-->
    <div class="all4 page fadeIn" style="display: none;">
      <div class="lan4">
        <p class="an1">四季轮换。而生机常在</p>
        <p class="an2">改革开放的事业</p>
        <p class="an3">不靠本本，不靠荫庇，</p>
        <p class="an4">我们凭双手双脚，躬耕而行，</p>
        <p class="an5">这座富于理想的新兴城市。</p>
      </div>
      <img src="img/p3/5.png" class="an6" />
      <div id="star">
        <img src="img/p4/01.png" class="star-position fadeInfite" />
        <img src="img/p4/02.png" class="star-position fadeInfite" />
        <img src="img/p4/03.png" class="star-position fadeInfite" />
      </div>
    </div>
    <!--第五张页面-->
    <div class="all5 page fadeIn" style="display: none;">
      <div class="lan5">
        <p id="a1">我们已经证明自己，</p>
        <p id="a2">但生命价值的另一种渴望，</p>
        <p id="a3">仍然未息，</p>
        <p id="a4">让我们相互改变吧！</p>
        <p id="a5">最好的深圳于最好的您，</p>
        <p id="a6">还没有到来。</p>
      </div>
      <div id="sg">
        <img src="img/p5/33 (1).png" id="sg51" />
        <img src="img/p5/44.png" id="sg52" />
      </div>
      <img src="img/p5/33 (2).png" id="a7" class="rotatePY" />
    </div>
    <!--第六张页面-->
    <div class="all6 page fadeIn" style="display: none;">
      <div class="lan6">
        <p class="ln1">再一次出发，从象牙塔开始，</p>
        <p class="ln2">走进街道，走近市民，走向实践。</p>
        <p class="ln3">用另一种创造，</p>
        <p class="ln4">让更多人，</p>
        <p class="ln5">可以面朝大海，春暖花开。</p>
      </div>
      <img src="img/p6/鸟.png" id="p7" />
      <img src="img/p6/55.png" id="p6" />
      <div>
        <img src="img/p6/sun.png" id="sun" class="clound-positon breath" />
        <img
          src="img/p6/litte.png"
          class="clound-positon sildeOut-t coloud-01"
        />
        <img
          src="img/p6/litte2.png"
          class="clound-positon sildeOut-s coloud-02"
        />
      </div>
    </div>
    <!--第七张页面-->
    <div class="all7 page fadeIn" style="display: none;">
      <div id="inner-seven" class="fadeIn">
        <div id="top7">
          <p class="op1">人生因担荷而变得充实，</p>
          <p class="op2">城市因创造而日趋美好。</p>
          <p class="op3">因为有梦，所以改变。</p>
          <p class="op4">请向前一步，</p>
          <p class="op5">深圳邀您，共赢未来。</p>
        </div>
        <div id="co71">
          <p>You can shine again.Let's try something new.</p>
        </div>
        <div id="con7">
          <p>深圳市选拔70名左右</p>
          <p>紧缺专业人才到基层任处级干部</p>
        </div>
        <div id="fot7">
          <img src="img/p7/222.png" id="f71" />
          <img src="img/p7/111.png" id="f72" />
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript" src="js/touch.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
</html>
